<script lang="ts" setup>
import { ref } from 'vue'
import { Notify } from 'quasar'
import { QUploader } from 'quasar'
import { useAuthStore } from 'src/stores/authStore'
import { storeToRefs } from 'pinia'
import { deleteImage, NoteDTO, publishAPI } from 'src/api'

const { token, showLoginDialog } = storeToRefs(useAuthStore())

const noteForm = ref<NoteDTO>({
  title: '',
  description: '',
  images: [],
})
const uploader = ref<QUploader>()
const map = ref(new Map<string, string>())

// 上传图片
async function uploadingImage() {
  Notify.create({
    message: '开始上传',
    position: 'top',
    type: 'info',
    timeout: 800,
  })
}

// 删除图片
async function removeImage(files: readonly any[]) {
  console.log('remove image')
  // 后端
  const fileName = files[0].name
  console.log(fileName)
  await deleteImage(map.value.get(fileName) || '')
  map.value.delete(fileName)
}
interface Info {
  files: readonly any[]
  xhr: any
}

function onUploadFailed() {
  Notify.create({
    message: '上传失败',
    position: 'top',
    type: 'negative',
    timeout: 800,
  })
}

function onUploadSucceed(info: Info) {
  Notify.create({
    message: '上传成功',
    position: 'top',
    type: 'positive',
    timeout: 800,
  })
  const result = JSON.parse(info.xhr.response)
  map.value.set(info.files[0].name, result.data)
}

// 发布笔记
async function publish() {
  console.log('publish')
  noteForm.value.images = Array.from(map.value.values())
  await publishAPI(noteForm.value)
  showLoginDialog.value = false
  Notify.create({
    message: '发布成功',
    position: 'top',
    type: 'positive',
    timeout: 1000,
  })
}

async function clear() {
  noteForm.value.description = ''
  noteForm.value.title = ''
  noteForm.value.images = []
  uploader.value?.reset()
  for (const image of map.value.values()) {
    await deleteImage(image)
  }
  showLoginDialog.value = false
}

const jwtHeader = ref([
  {
    name: 'Authorization',
    value: token.value,
  },
])
</script>

<template>
  <div class="creator">
    <q-uploader
      ref="uploader"
      class="uploader"
      url="http://localhost:8080/note/uploadImage"
      :headers="jwtHeader"
      label="图片编辑"
      multiple
      max-files="10"
      max-file-size="2000000"
      flat
      hide-upload-btn
      field-name="file"
      auto-upload
      @uploading="uploadingImage"
      @failed="onUploadFailed"
      @removed="removeImage"
      @uploaded="onUploadSucceed"
    />
    <q-input
      color="grey-3"
      label-color="orange"
      outlined
      v-model="noteForm.title"
      label="标题"
      style="margin-bottom: 20px"
    />
    <q-input
      color="grey-3"
      label-color="orange"
      outlined
      v-model="noteForm.description"
      label="内容"
      type="textarea"
    />
    <div style="margin: 0 auto; width: 260px">
      <q-btn
        color="primary"
        label="发布"
        size="md"
        unelevated
        rounded
        style="margin: 15px; width: 100px"
        :disable="
          !(map.size != 0 && noteForm.description != '' && noteForm.title != '')
        "
        @click="publish"
      />
      <q-btn
        color="grey-3"
        text-color="black"
        label="取消"
        unelevated
        rounded
        style="margin: 15px; width: 100px"
        @click="clear"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.uploader {
  width: 100%;
  height: 320px;
}
.creator {
  width: 500px;
  height: 615px;
  padding: 0 20px;
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面深色条*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1);
    background: orange;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1);
    border-radius: 10px;
    background: #ededed;
  }
}
</style>
